import React, { Component } from 'react'

// 16.8
// 类组件       (业务逻辑)
// 函数式组件   (展示视图)

// 类组件中的生命周期
// 实例期   constructor   componentWillMount    render   componentDidMount
// 存在期   shouldComponentUpdate      componentWillUpdate   render  componentDidUpdate
// (state中的数据发生改变或者props中的数据发生改变)   
// 销毁期   componentWillUnmount
class ClassCom extends Component {
    constructor(props) {
        super(props)
    }

    componentWillUnmount() {

    }

    // 应该  组件  更新
    shouldComponentUpdate() {
        return true
    }

    componentWillUpdate() {

    }

    componentDidUpdate() {

    }

    // 组件 将要  挂载
    componentWillMount() {

    }
    // 组件 完成  挂载
    componentDidMount() {

    }
    state = {
        num: 100
    }
    change = () => {
        // 时而同步时而异步
        this.setState({
           num: 200 
        }, () => {
            console.log(this.state.num)
        })
    }
    render() {
        const { num } = this.state
        return (
            <div>
                ClassCom--- { num }
                <button onClick={() => {
                    this.change()
                }}>修改</button>
            </div>
        )
    }
}


export default ClassCom
